<template>
  <div class="content">
    <div class="upConent">
      <div>某会议室实时看板</div>
    </div>
    <div class="downContent">
      <div class="leftDownContent">
        <div>
          <div id="chartLineBoxOne" style="width: 100%;height: 100%;padding: 10px 0 0 20px"></div>
        </div>
        <div>
          <div id="chartLineBoxTwo" style="width: 100%;height: 100%;padding: 10px 0 0 20px"></div>
        </div>
        <div>
          <div id="chartLineBoxThree" style="width: 100%;height: 100%;padding:10px 0 0 20px"></div>
        </div>
      </div>
      <div class="centerDownContent">
        <div class="centerUp">
          <div class="upFamily">
            <div class="centerUpLeft">
              <div class="numTitle">某日发电量</div>
              <div class="number">{{ Math.round(value1[0]) }}</div>
            </div>
            <div class="centerUpCenter">
              <div>
                <div>计划发电量</div>
                <div class="ceNum">{{ Math.round(value1[1]) }}</div>
              </div>
              <div>
                <div>已完成</div>
                <div class="ceNum bgNum">88%</div>
              </div>
            </div>
            <div class="centerUpRight">
              <div>
                <div id="chartLineBoxFive" style="width: 100%;height: 100%;"></div>
              </div>
              <div>
                <div id="chartLineBoxSix" style="width: 100%;height: 100%;"></div>
              </div>
              <div>
                <div id="chartLineBoxSeven" style="width: 100%;height: 100%;"></div>
              </div>
            </div>
          </div>
          <div class="upEchar">
            <div id="chartLineBoxEight" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <div class="centerDown">
          <div id="chartLineBoxFour" style="width: 100%;height: 100%;padding:15px 0 0 20px"></div>
        </div>
      </div>
      <div class="rightDownContent">
        <div class="rightUp">
          <p style="padding:15px 0 0 20px;position: absolute;font-size: 18px;font-weight: bold;">风电计划完成情况</p>
          <div>
            <div class="cei ceir">85%</div>
            <div>本年时间进度</div>
          </div>
          <div>
            <div class="cei ceiy">85%</div>
            <div>本年时间进度</div>
          </div>
          <div>
            <div class="cei ceip">85%</div>
            <div>本年时间进度</div>
          </div>
        </div>
        <div class="rightCenter">
          <p style="padding:15px 0 0 20px;position: absolute;top:5%;left:-0%;font-size: 18px;font-weight: bold;">
            风电计划完成情况</p>
          <ul>
            <li>
              <div>指标</div>
              <div>值</div>
            </li>
            <li>
              <div>月累计收入</div>
              <div>6785769</div>
            </li>
            <li>
              <div>月累计成本</div>
              <div>2785769</div>
            </li>
            <li>
              <div>月累计利润</div>
              <div>4785769</div>
            </li>
          </ul>
        </div>
        <div class="rightDown">
          <div id="chartLineBoxNine" style="width: 100%;height: 100%;padding: 20px 0 0 20px"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

</script>
<script>
import * as echarts from 'echarts'
import { useTransition, TransitionPresets } from '@vueuse/core'
import { ref } from 'vue'
export default {
  components: {},
  props: {},
  data() {
    return {
      value1: [0, 0]
    }
  },
  computed: {},
  watch: {},
  created() {
    const _this = this
    window.onresize = function() {
      _this.chartLine.resize()
    }
  },
  mounted() {
    this.lineEcharts()
    this.lineEchartsTwo()
    this.lineEchartsThree()
    this.chartLineBoxFour()
    this.chartLineBoxFive()
    this.chartLineBoxSix()
    this.chartLineBoxSeven()
    this.chartLineBoxEight()
    this.chartLineBoxNine()
    this.transition()
  },
  methods: {
    transition() {
      const value1 = ref([0, 0])
      this.value1 = useTransition(value1, {
        duration: 3000,
        transition: TransitionPresets.easeOutExpo
      })
      value1.value = [835729, 849586]
    },
    lineEcharts() {
      this.chartLine = echarts.init(document.getElementById('chartLineBoxOne'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          // subtext: '完成率',
          text: '某机组状态',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            fontSize: 18, // 大小
            align: 'center' // 水平对齐
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ['#00FFFF', '#DB2360'],
        legend: {
          x: 'center', // 可设定图例在左、右、居中
          y: 'bottom', // 可设定图例在上、下、居中
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          textStyle: {
            // 图例文字的样式
            color: '#6573A6',
            fontSize: 16
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#6573A6'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['周一', '周二', '周三'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#6573A6'
            }
          }
        },
        series: [
          {
            name: '直接访问',
            type: 'bar',

            label: {
              show: true,
              position: 'insideRight'
            },
            data: [320, 302, 301]
          },
          {
            name: '邮件营销',
            type: 'bar',

            label: {
              show: true,
              position: 'insideRight'
            },
            data: [120, 132, 101]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option)
    },

    lineEchartsTwo() {
      this.chartLineTwo = echarts.init(document.getElementById('chartLineBoxTwo'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          // subtext: '完成率',
          text: '耗存分析',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            fontSize: 18, // 大小
            align: 'center' // 水平对齐
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ['#00FFFF', '#2D2A73'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // boundaryGap: false,
            // axisTick: {
            //     alignWithLabel: true
            // },

            axisLabel: {
              show: true,
              textStyle: {
                color: '#6573A6'
              }
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#6573A6'
              }
            }
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'bar',
            stack: '广告',
            barWidth: '30%',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'bar',
            barWidth: '30%',
            stack: '广告',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineTwo.setOption(option)
    },

    lineEchartsThree() {
      this.chartLine = echarts.init(document.getElementById('chartLineBoxThree'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          // subtext: '完成率',
          text: '自然因素',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            fontSize: 18, // 大小
            align: 'center' // 水平对齐
          }
        },
        color: ['#DD1B67', '#270376'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left', // 可设定图例在左、右、居中
          y: 'center', // 可设定图例在上、下、居中
          data: ['直接访问', '邮件营销'],
          textStyle: {
            // 图例文字的样式
            color: '#6573A6',
            fontSize: 16
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option)
    },

    // chartLineBoxFour
    chartLineBoxFour() {
      this.chartLineFour = echarts.init(document.getElementById('chartLineBoxFour'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '个电厂发电量统计',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            // fontSize: 14, // 大小
            align: 'center' // 水平对齐
          }
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#676FAA'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#676FAA'
              }
            }
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '40%',
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                // 颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#CD00FF'
                  },
                  {
                    offset: 1,
                    color: '#4800DC'
                  }
                ])
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineFour.setOption(option)
    },

    chartLineBoxFive() {
      this.chartLineTwo = echarts.init(document.getElementById('chartLineBoxFive'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '当日负荷率',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            // fontSize: 14, // 大小
            align: 'center' // 水平对齐
          }
        },
        color: ['#D100FF', '#270376'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          show: false
          // orient: 'vertical',
          // left: 10,
          // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineTwo.setOption(option)
    },

    chartLineBoxSix() {
      this.chartLineTwo = echarts.init(document.getElementById('chartLineBoxSix'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '当日负荷率',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            // fontSize: 14, // 大小
            align: 'center' // 水平对齐
          }
        },
        color: ['#D100FF', '#270376'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          show: false
          // orient: 'vertical',
          // left: 10,
          // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 135, name: '视频广告' },
              { value: 85, name: '搜索引擎' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineTwo.setOption(option)
    },
    // chartLineBoxSeven
    chartLineBoxSeven() {
      this.chartLineTwo = echarts.init(document.getElementById('chartLineBoxSeven'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '当日负荷率',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            // fontSize: 14, // 大小
            align: 'center' // 水平对齐
          }
        },
        color: ['#D100FF', '#270376'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          show: false
          // orient: 'vertical',
          // left: 10,
          // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 200, name: '联盟广告' },
              { value: 135, name: '视频广告' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineTwo.setOption(option)
    },

    chartLineBoxEight() {
      this.chartLineTwo = echarts.init(document.getElementById('chartLineBoxEight'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '发电量趋势',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            // fontSize: 14, // 大小
            align: 'center' // 水平对齐
          }
        },
        color: ['yellow', '#8200C8'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
          textStyle: {
            // 图例文字的样式
            color: '#6573A6',
            fontSize: 16
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#6573A6'
              }
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#6573A6'
              }
            }
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {
              normal: {
                type: 'default',
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,

                      color: 'rgb(37, 117, 252)' // 区域颜色
                    },
                    {
                      offset: 1,

                      color: 'rgb(106, 17, 203)' // 区域颜色
                    }
                  ],
                  false
                )
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineTwo.setOption(option)
    },

    chartLineBoxNine() {
      this.chartLineTwo = echarts.init(document.getElementById('chartLineBoxNine'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          // subtext: '完成率',
          text: '完成率',
          left: 'left',
          textStyle: {
            color: '#fff', // 颜色
            fontStyle: 'normal', // 风格
            fontWeight: 'bold', // 粗细
            fontFamily: 'Microsoft yahei', // 字体
            fontSize: 18, // 大小
            align: 'center' // 水平对齐
          }
        },
        color: ['#6E2FD4', '#FFFF00', '#D9605E'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left', // 可设定图例在左、右、居中
          y: 'center', // 可设定图例在上、下、居中
          data: ['rose1', 'rose2', 'rose3'],
          textStyle: {
            // 图例文字的样式
            color: '#6573A6',
            fontSize: 16
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          x: 30,
          y: 40,
          x2: 20,
          y2: 100
          //   borderWidth: 10
        },
        series: [
          {
            name: '半径模式',
            type: 'pie',
            radius: [20, 110],
            center: ['75%', '60%'],
            roseType: 'radius',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 10, name: 'rose1' },
              { value: 8, name: 'rose2' },
              { value: 15, name: 'rose3' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineTwo.setOption(option)
    }
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: #100b30;
}

.upConent {
  width: 100%;
  height: 10%;
  background-image: url('@/assets/meeting/xingOne.png');
  background-size: 100% 90%;
  color: #fff;
  font-size: 54px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.downContent {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: row;
  padding: 0 20px 20px 20px;
}

.leftDownContent {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.centerDownContent {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.rightDownContent {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.leftDownContent > div {
  flex: 1;
  background-image: url('@/assets/meeting/yuanOne.png');
  background-size: 100% 100%;
}

.leftDownContent > div:nth-child(3) {
  margin: 20px 0;
}

.rightUp {
  height: 25%;
  background-image: url('@/assets/meeting/three.png');
  background-size: 100% 100%;
  color: #fff;
  display: flex;
  flex-direction: row;
}

.rightUp > div {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rightCenter {
  height: 35%;
  background-image: url('@/assets/meeting/three.png');
  background-size: 100% 100%;
  margin: 20px 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rightCenter > ul {
  width: 80%;
  height: 60%;
  margin-top: 40px;
  background-color: #22196d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rightCenter > ul > li {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 10px 10px;
  justify-content: space-between;
}

.rightCenter > ul > li > div {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rightDown {
  height: 40%;
  background-image: url('@/assets/meeting/three.png');
  background-size: 100% 100%;
}

.centerUp {
  height: 70%;
  display: flex;
  flex-direction: column;
}

.upFamily {
  height: 40%;
  display: flex;
  flex-direction: row;
}

.centerUpLeft {
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.numTitle {
  width: 100%;
  height: 30%;
  font-size: 25px;
}

.number {
  width: 100%;
  height: 70%;
  font-size: 35px;
  letter-spacing: 8px;
  padding-top: 20px;
}

.centerUpCenter {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: row;
  color: #fff;
  justify-content: center;
  align-items: center;
}

.centerUpCenter > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ceNum {
  font-size: 25px;
  padding: 20px 0;
}

.bgNum {
  color: rgb(239, 18, 247);
}

.centerUpRight {
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.centerUpRight > div {
  flex: 1;
}

.upEchar {
  height: 60%;
}

.centerDown {
  height: 30%;
  background-image: url('@/assets/meeting/four.png');
  background-size: 100% 100%;
}

.cei {
  font-size: 30px;
}

.ceir {
  color: rgb(241, 10, 203);
}

.ceiy {
  color: rgb(231, 209, 8);
}

.ceip {
  color: rgb(128, 18, 218);
}
</style>
